<template>
  <div class="reportParamsStatistical">
    <div class="reportParamsStatistical_treeBg">
      <MetaTreeList title-size="20" title="设备" :icon="treeIcon" :default-props="defaultProps" :tree-data="equTreeData" @treeItemChoose="roloeItemChoose"></MetaTreeList>
    </div>
    <div class="reportParamsStatistical_infoBg">
      <div v-if="Object.keys(roleInfoItem).length > 0" class="reportParamsStatistical_info">
        <div class="reportParamsStatistical_equInfoBg">
          <div class="reportParamsStatisticalEquInfo_left">
            <div class="equipmentO_infoTitleBg" style="margin-bottom: 6px;border-top-left-radius: 6px">
              <div class="equipmentO_infoTitle">设备信息</div>
              <div class="equipmentO_infoContent">
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/esign_user.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">设备名称</span>&nbsp;&nbsp;{{ roleInfoItem.customizeName ? roleInfoItem.customizeName : roleInfoItem.pointName }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/esign_ekind.png" class="equipmentO_infoItemIconSnid">
                  <div v-if="roleInfoItem.equipment.equipment_type == '1'" class="equipmentO_infoItemText"><span style="color: #666">设备类型</span>&nbsp;&nbsp;浮标式设备</div>
                  <div v-else-if="roleInfoItem.equipment.equipment_type == '3'" class="equipmentO_infoItemText"><span style="color: #666">设备类型</span>&nbsp;&nbsp;岸基式设备</div>
                  <div v-else-if="roleInfoItem.equipment.equipment_type == '4'" class="equipmentO_infoItemText"><span style="color: #666">设备类型</span>&nbsp;&nbsp;管道式设备</div>
                  <div v-else-if="roleInfoItem.equipment.equipment_type == '5'" class="equipmentO_infoItemText"><span style="color: #666">设备类型</span>&nbsp;&nbsp;潜入式设备</div>
                  <div v-else class="equipmentO_infoItemText"><span style="color: #666">设备类型</span>&nbsp;&nbsp;-</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/esign_sid.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">设备序列号</span>&nbsp;&nbsp;{{ roleInfoItem.equipment.sernumber }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/esign_elec.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">设备电量</span>&nbsp;&nbsp;{{ getEquElec(roleInfoItem.equipmentRecord.electricity, roleInfoItem.equipment.version)}}</div>
                </div>
                <div class="equipmentO_infoItemBg" style="width: 66.66%">
                  <img src="@/assets/images/statistical/esign_addr.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">设备所在地</span>&nbsp;&nbsp;{{ maintenanceInfo.address}}</div>
                </div>
              </div>
            </div>
            <div class="equipmentO_infoTitleBg" style="border-bottom-left-radius: 6px">
              <div class="equipmentO_infoTitle">部署环境</div>
              <div class="equipmentO_infoContent">
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_waterq.png" class="equipmentO_infoItemIconName">
                  <div class="equipmentO_infoItemText"><span style="color: #666">水质</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('waterQuality',maintenanceInfo['waterQuality']) }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_oil.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">油膜</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('oilFilm',maintenanceInfo['oilFilm']) }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_waterline.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">液面平稳度</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('waterSurfaceSmoothness',maintenanceInfo['waterSurfaceSmoothness']) }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_water.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">水体</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('water',maintenanceInfo['water']) }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_waterv.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">水体流速</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('waterVelocity',maintenanceInfo['waterVelocity']) }}</div>
                </div>
                <div class="equipmentO_infoItemBg">
                  <img src="@/assets/images/statistical/msign_phytoplankton.png" class="equipmentO_infoItemIconSnid">
                  <div class="equipmentO_infoItemText"><span style="color: #666">浮游植物</span>&nbsp;&nbsp;{{ getValueFromQualityEnum('phytoplankton',maintenanceInfo['phytoplankton']) }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="reportParamsStatisticalEquInfo_right">
            <div class="reportParamsStatisticalEquInfo_equipmentPosition" id="paramsReportEquipmentPosition" tabindex="0"></div>
          </div>
        </div>
        <div class="reportParamsStatistical_paramsDataBg">
          <div class="reportParamsStatisticalDatas_list" v-for="(paramItem,paramIndex) in paramKeys" :key="paramItem.paramkey">
            <div class="reportParamsStatisticalDatasList_tableArea">
              <div class="rpsdlTable_title">{{paramItem.paramname}} (参考值 {{paramItem.paramdown}} - {{paramItem.paramup}})</div>
              <div class="rpsdlTable_header">
                <div class="rpsdlTableHeader_item">时间</div>
                <div class="rpsdlTableHeader_item">数据</div>
              </div>
              <div class="rpsdlTable_content">
                <div class="rpsdlTable_contentBg" v-for="dataItem in paramShowData[paramItem.paramkey]" :key="paramItem.paramkey + dataItem.save_time">
                  <div class="rpsdlTableContent_item">{{ dataItem.save_time }}</div>
                  <div class="rpsdlTableContent_item">{{ parseFloat(dataItem.paramvalue).toFixed(dataItem.reserved) }}</div>
                </div>
                <div class="rpsdlTableContent_moreData" @click="doGetMoreData(paramItem,paramIndex)">查看前一日 (当前：{{paramItem.date}})</div>
              </div>
            </div>
            <div class="reportParamsStatisticalDatasList_chartArea">
              <div :id="'reportParamsStatisticalDatasListChart_' + paramItem.paramkey" class="reportParamsStatisticalDatasList_chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MetaTreeList from '../components/MetaTreeList'
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'reportParamsStatistical',
  components: {
    MetaTreeList
  },
  data () {
    return {
      treeIcon: require("@/assets/images/v3/equipmentTreeIcon.png"),
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      equTreeData: [],
      roleInfoItem: {},
      paramShowData: {},
      paramWholeData: {},
      paramKeys: [],
      paramCharts: {},
      maintenanceInfo: {},
      waterQualityEnumDatas: {},
      environmentTypeDatas: [],
      map: null
    }
  },
  mounted() {
    this.getEnumEnvironmentType(() => {
      this.getEnumDatas()
    })
    this.initEquipmentData()
  },
  methods: {
    initEquipmentData() {
      //点位默认选中 Ray
      let pointId = localStorage.getItem('dataCenterEquipmentId')

      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "pointEquipment/userAreaPoint",
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result
          let currentDataItem = {}
          for(let i in this.equTreeData) {
            this.equTreeData[i].name = "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name
            this.equTreeData[i].level = 1
            for(let j in this.equTreeData[i].list) {
              if(this.equTreeData[i].list[j].customizeName && this.equTreeData[i].list[j].customizeName !== '') {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].customizeName
              }else {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].pointName
              }
              this.equTreeData[i].list[j].level = 2

              //点位默认选中 Ray
              if(pointId === this.equTreeData[i].list[j].id) {
                currentDataItem = this.equTreeData[i].list[j]
              }
            }
          }
          //点位默认选中 Ray
          if(Object.keys(currentDataItem).length > 0) {
            this.roloeItemChoose(currentDataItem)
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getUserParams(date,callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/paramListUidEid",
        method: "post",
        data: {
          // id: this.roleInfoItem.pointId
          equipmentId: this.roleInfoItem.equipmentId
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.paramKeys = []
          for(let i in res.data.result) {
            let item = res.data.result[i]
            item.date = date
            this.paramKeys.push(item)
          }
          if(callback && typeof callback === 'function') {
            callback()
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getParamsDatas(date,callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "reflectivity/getAverageData",
        method: "get",
        params: {
          id: this.roleInfoItem.id,
          start: date + ' 00:00:00',
          end: date + ' 23:59:59'
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.paramWholeData[date] = {}
          for(let i in this.paramKeys) {
            let paramkey = this.paramKeys[i].paramkey
            this.paramWholeData[date][paramkey] = []
            if(res.data.result && res.data.result[paramkey]) {
              this.paramWholeData[date][paramkey] = res.data.result[paramkey]
            }
          }
          callback()
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    initMapInfo(data) {
      let depth = 2
      let position = new AMap.LngLat(data.equipment.longitude, data.equipment.latitude)
      if(this.map) {
        this.map.clearMap()
        this.map = null
      }
      this.map = new AMap.Map('paramsReportEquipmentPosition', {
        zoom: 12,
        resizeEnable: true,
        center: position,
        pitch: 0,
        viewMode: '3D',
        mapStyle: 'amap://styles/fresh'
      })
      let icon = new AMap.Icon({
        size: new AMap.Size(30, 30),    // 图标尺寸
        image: process.env.PROGOO_IMAGE + 'thumbtack/blue.png',  // Icon的图像
        imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(30, 30),   // 根据所设置的大小拉伸或压缩图片
      });
      let marker = new AMap.Marker({
        position: position,
        title: data.customizeName ? data.customizeName : data.pointName,
        icon: icon,
        anchor:'bottom-center',
        offset: new AMap.Pixel(0,0),
        zIndex: 100
      });
      this.map.add(marker)
    },
    roloeItemChoose(item) {
      if(item.level === 1) {
        return
      }
      this.roleInfoItem = {}
      this.$nextTick(() => {
        this.roleInfoItem = deepClone(item)
        //点位选中 Ray
        localStorage.setItem('dataCenterEquipmentId',this.roleInfoItem.id)

        this.getEquipmentInfo()

        let searchDate = utils.formatDate('yyyy-MM-dd', new Date())
        // let searchDate = '2021-10-30'
        this.paramWholeData = {}
        this.getUserParams(searchDate,() => {
          this.getParamsDatas(searchDate,() => {
            this.paramShowData = {}
            for(let item in this.paramWholeData[searchDate]){
              this.paramShowData[item] = this.paramWholeData[searchDate][item]
            }
            this.drawParamCharts()
            this.initMapInfo(this.roleInfoItem)
          })
        })
      })
    },
    drawParamCharts() {
      for(let i in this.paramKeys) {
        let echarts = require('echarts')
        let pKey = this.paramKeys[i].paramkey
        let chartKey = 'reportParamsStatisticalDatasListChart_' + pKey
        let charts = document.getElementById(chartKey)
        if(!charts) {
          return
        }
        let xDatas = []
        let yDatas = []

        for(let j in this.paramShowData[this.paramKeys[i].paramkey]) {
          let pDataItem = this.paramShowData[this.paramKeys[i].paramkey][j]
          xDatas.push(pDataItem.save_time)
          yDatas.push(parseFloat(pDataItem.paramvalue).toFixed(pDataItem.reserved))
        }
        this.paramCharts[pKey] = echarts.init(charts)
        this.paramCharts[pKey].setOption({
          title: {
            text: this.paramKeys[i].paramname + (this.paramKeys[i].unit && this.paramKeys[i].unit !== '' ? ' (' + this.paramKeys[i].unit + ')' : ''),
            x:'28',
            y:'8',
            textStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: '18'
            }
          },
          color: ['#F28F9B'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            bottom: '7%',
            top: '18%',
            height: '70%',
            right: '2%',
            show: true,
            // backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#DFEAFA',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10,
              textStyle: {
                color: '#000',
              },
            },
            boundaryGap: false,
            data: xDatas,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#DFEAFA'
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10,
              textStyle: {
                color: '#000',
              },
            },
            splitLine: {
              lineStyle: {
                  color: ['#DFEAFA']
              }
            },
            scale:true
          },
          series: [
            {
              name: this.paramKeys[i].paramname,
              type: 'line',
              stack: '总量',
              smooth: true,
              data: yDatas,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(248,208,137,0.3)'
                }, {
                  offset: 1,
                  color: '#F8D089'
                }])
              },
            }
          ]
        })
      }

      this.$nextTick(() => {
        for(let i in this.paramKeys) {
          this.paramCharts[this.paramKeys[i].paramkey].resize()
        }
      })
    },
    doGetMoreData(paramItem,index) {
      let paramDate = paramItem.date
      let lastTime = new Date(paramDate).getTime() - (1000 * 60 * 60 * 24)
      let lastDate = utils.formatDate('yyyy-MM-dd', new Date(lastTime))
      if(this.paramWholeData[lastDate]) {
        for(let i in this.paramWholeData[lastDate][paramItem.paramkey]) {
          this.paramShowData[paramItem.paramkey].push(this.paramWholeData[lastDate][paramItem.paramkey][i])
        }
        this.paramKeys[index].date = lastDate
        this.drawParamCharts()
      }else {
        this.getParamsDatas(lastDate,() => {
          for(let i in this.paramWholeData[lastDate][paramItem.paramkey]) {
            this.paramShowData[paramItem.paramkey].push(this.paramWholeData[lastDate][paramItem.paramkey][i])
          }
          this.paramKeys[index].date = lastDate
          this.drawParamCharts()
        })
      }
    },
    getEquipmentInfo() {
      this.maintenanceInfo = {}
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'equipmentInfo/equipmentById',
        method: "get",
        params: {
          id: this.roleInfoItem.equipmentId
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.maintenanceInfo = res.data.result
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getEnumEnvironmentType(callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "domains/getList",
        method: "post",
        data: ['environmentType'],
      }).then((res) => {
        if(res.data.code === 200) {
          this.environmentTypeDatas = res.data.result['environmentType']
          if(callback && typeof(callback) === 'function') {
            callback()
          }
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getEnumDatas() {
      let keys = []
      for(let i in this.environmentTypeDatas) {
        keys.push(this.environmentTypeDatas[i].key)
      }
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "domains/getList",
        method: "post",
        data: keys,
      }).then((res) => {
        if(res.data.code === 200) {
          this.waterQualityEnumDatas = res.data.result
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getValueFromQualityEnum(key, id) {
      let res = '-'
      if(id && id !== '') {
        let enumData = this.waterQualityEnumDatas[key]
        for(let i in enumData) {
          if(id == enumData[i].key) {
            res = enumData[i].value
            break
          }
        }
      }
      return res
    },
    getEquElec(electricity,version) {
      let elecText = '-'
      if(electricity && electricity != 0 && version >= 3) {
        let elec = parseFloat(electricity)
        if(elec >= 12) {
          elecText = '高'
        }else if(elec >= 11.5 && elec < 12) {
          elecText = '中'
        }else {
          elecText = '低'
        }
      }
      return elecText
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.reportParamsStatistical{
  background-color: #EAECF0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 8px 0 8px 12px;
  // overflow-y: scroll;
  .reportParamsStatistical_treeBg {
    height: 100%;
    background-color: white;
    border-radius: 6px;
    margin-right: 12px;
  }
  .reportParamsStatistical_infoBg {
    height: 100%;
    box-sizing: border-box;
    flex: 1;
    padding-right: 12px;
    overflow-x: scroll;
    .reportParamsStatistical_info {
      width: 100%;
      height: 100%;
      flex: 1;
      box-sizing: border-box;
      border-radius: 6px;
      min-width: 1320px;
      // padding: 15px;
      .reportParamsStatistical_equInfoBg {
        width: 100%;
        float: left;
        display: flex;
        .reportParamsStatisticalEquInfo_left {
          flex: 3;
          .equipmentO_infoTitleBg {
            width: 100%;
            float: left;
            padding-bottom: 10px;
            background-color: white;
            padding: 6px 14px 10px 28px;
            box-sizing: border-box;
            .equipmentO_infoTitle {
              font-size: 18px;
              float: left;
              height: 45px;
              line-height: 45px;
              width: 100%;
            }
            .equipmentO_infoContent {
              width: 100%;
              float: left;
              .equipmentO_infoItemBg {
                height: 20px;
                float: left;
                padding-left: 70px;
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                box-sizing: border-box;
                width: 33.33%;
                .equipmentO_infoItemIconShowName {
                  width: 16px;
                  height: 15px;
                }
                .equipmentO_infoItemIconName {
                  width: 13px;
                  height: 14px;
                }
                .equipmentO_infoItemIconSnid {
                  width: 16px;
                  height: 16px;
                }
                .equipmentO_infoItemText {
                  font-size: 15px;
                  color: #999;
                  margin-left: 8px;
                }
              }
            }
          }
        }
        .reportParamsStatisticalEquInfo_right {
          flex: 1.2;
          margin-left: 6px;
          background: white;
          box-sizing: border-box;
          padding: 20px 26px;
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
          .reportParamsStatisticalEquInfo_equipmentPosition {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }
      }
      .reportParamsStatistical_paramsDataBg {
        width: 100%;
        float: left;
        margin-top: 16px;
        border-radius: 6px;
        background: white;
        box-sizing: border-box;
        padding: 20px 24px 0;
        .reportParamsStatisticalDatas_list {
          width: 100%;
          display: flex;
          margin-bottom: 20px;
          .reportParamsStatisticalDatasList_tableArea {
            flex: 1;
            border: 1px solid #EBEEF5;
            .rpsdlTable_title {
              width: 100%;
              height: 50px;
              line-height: 50px;
              font-size: 18px;
              color: #333;
              border-bottom: 1px solid #EBEEF5;
              box-sizing: border-box;
              padding: 0 24px;
            }
            .rpsdlTable_header {
              width: 100%;
              height: 48px;
              display: flex;
              box-sizing: border-box;
              padding-right: 15px;
              .rpsdlTableHeader_item {
                flex: 1;
                height: 100%;
                line-height: 48px;
                text-align: center;
                color: #909399;
                font-weight: bold;
                font-size: 14px;
                border-bottom: 1px solid #EBEEF5;
              }
              .rpsdlTableHeader_item:nth-child(odd) {
                border-right: 1px solid #EBEEF5;
              }

            }
            .rpsdlTable_content {
              width: 100%;
              height: 200px;
              overflow-y: scroll;
              .rpsdlTable_contentBg {
                width: 100%;
                display: flex;
                height: 48px;
                .rpsdlTableContent_item {
                  flex: 1;
                  height: 100%;
                  line-height: 48px;
                  text-align: center;
                  color: #606266;
                  font-size: 14px;
                  border-bottom: 1px solid #EBEEF5;
                }
                .rpsdlTableContent_item:nth-child(odd) {
                  border-right: 1px solid #EBEEF5;
                }
              }
              .rpsdlTableContent_moreData {
                width: 100%;
                height: 40px;
                cursor: pointer;
                line-height: 40px;
                font-size: 13px;
                text-align: center;
                color: #409EFF;
                border-bottom: 1px solid #EBEEF5;
              }
            }
          }
          .reportParamsStatisticalDatasList_chartArea {
            flex: 1;
            box-sizing: border-box;
            padding-left: 24px;
            .reportParamsStatisticalDatasList_chart {
              width: 100%;
              height: 100%;
              border: 1px solid #EBEEF5;
            }
          }
        }
      }
    }
  }
}
</style>
